<template>
  <div class="calendar">
    <el-card class="card1">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-calendar v-model="value" ref="calRef">
            <template slot="dateCell" slot-scope="{ date, data }"
              ><p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
              <i
                v-if="allEvent.indexOf(data.day.split('-').slice(1).join('-')) != -1"
                class="el-icon-s-order haveEvent"
              ></i>
            </template>
          </el-calendar>
        </el-col>
        <el-col :span="6">
          <el-card class="card2" style="border-radius: 1rem">
            <router-view :selectedDay="selectedDay"></router-view>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      selectedDay: new Date().toLocaleDateString(),
      allEvent: [],
    };
  },
  mounted() {
    this.selectedDay = this.$refs.calRef.formatedToday;
    this.$bus.$on("AllDate", this.getAllData());
    try {
      let nodeArr = document.querySelectorAll(".current");
      [].slice.call(nodeArr).map((item) => {
        item.addEventListener("click", () => {
          this.$bus.$emit("changeSelect");
          this.selectedDay = this.$refs.calRef.selectedDay;
        });
      });
    } catch (error) {}
    this.getAllData();
  },
  components: {},
  methods: {
    async getAllData() {
      const { data: res } = await this.$http.post("/calendar/Index/getAllData");
      if (res.status !== 200) return this.$message.error(res.textRequest);
      this.allEvent = res.data.map((item) => {
        let d = new Date(item * 1000);
        let m = d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let da = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();

        return (d.getFullYear() + "-" + m + "-" + da).slice(5);
      });
      console.log(this.allEvent);
    },
  },
};
</script>
<style>
.el-calendar__body {
  padding-bottom: 0 !important;
}
</style>
<style scoped>
.el-calendar {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  height: 90vh;
  min-height: 35.25rem;
  overflow: auto;
}

.el-calendar:hover {
  box-shadow: 0.1rem 0.1rem 0.2rem #aed3d3, -0.1rem -0.1rem 0.2rem #a2e9ee;
}
.card1 {
  /* padding-top: 3rem; */
  height: 95vh;
  overflow: hidden;
  background: rgb(197, 248, 255);
}
.card2 {
  height: 90vh;
}
.is-selected {
  color: #1989fa;
}
.haveEvent {
  color: #1989fa;
}
</style>
